<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>放大镜</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            img {
                width: 100%;
                height: 100%;
                display: block;
            }

            .box {
                width: 450px;
                margin: 50px;
                display: flex;
                flex-direction: column;
                position: relative;
            }

            .box > .show {
                width: 400px;
                height: 400px;
                border: 1px solid #333;
                position: relative;
            }

            .box > .show > .mask {
                width: 200px;
                height: 200px;
                background-color: yellow;
                opacity: 0.4;
                position: absolute;
                top: 0px;
                left: 0px;
                display: none;
            }

            .box > .list {
                width: 100%;
                flex: 1;
                display: flex;
                justify-content: flex-start;
                align-items: center;
                box-sizing: border-box;
                padding: 20px;
            }

            .box > .list > p {
                width: 54px;
                height: 54px;
                border: 1px solid #333;
                margin-right: 10px;
            }

            .box > .list > p.active {
                border-color: red;
            }

            .box > .enlarge {
                width: 400px;
                height: 400px;

                position: absolute;
                top: 0;
                left: 101%;

                background: url(./imgs/1.big.jpg) no-repeat;
                background-size: 800px 800px;
                background-position: 0 0;

                /* display: none; */
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="show">
                <img src="./imgs/1.jpg" alt="" />
                <div class="mask"></div>
            </div>

            <div class="list">
                <p class="active">
                    <img
                        src="./imgs/1.small.jpg"
                        showImg="./imgs/1.jpg"
                        enlargeImg="./imgs/1.big.jpg"
                        alt=""
                    />
                </p>
                <p>
                    <img
                        src="./imgs/2.small.jpg"
                        showImg="./imgs/2.jpg"
                        enlargeImg="./imgs/2.big.jpg"
                        alt=""
                    />
                </p>
            </div>

            <div class="enlarge"></div>
        </div>
        
        <!-- <script src="./enlarger.js"></script> -->
        <script src="./enlarger-class.js"></script>
        <script>
            const box = document.querySelector(".box")
            const enlarger = new Enlarger(box)
        </script>
    </body>
</html>
